<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于我们显示信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../assets/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<div id="updateForm" style="display: none">
		<form class="layui-form" action="" lay-filter="test2">
			<div class="layui-form-item">
				<label class="layui-form-label">编号</label>
				<div class="layui-input-block">
					<input type="text" readonly name="aid" style="border:none;font-weight:bold;font-size:20px"    class="layui-input">
				</div>
			</div>
				<div class="layui-form-item">
				<label class="layui-form-label">标题名称</label>
				<div class="layui-input-block">
					<input type="text" name="aname" lay-verify="title"
						autocomplete="off" placeholder="请输入标题名称" class="layui-input" >
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">标题内容</label>
				<div class="layui-input-block">
					<input type="text" name="acontent" lay-verify="title" autocomplete="off"
						placeholder="请输入标题内容" class="layui-input" >
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit lay-filter="*">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<div id="addForm" style="display: none">
		<form class="layui-form" action="" lay-filter="test1">
			<div class="layui-form-item">
				<label class="layui-form-label">编号</label>
				<div class="layui-input-block">
					<input type="text" name="aid" lay-verify="title" autocomplete="off"
						placeholder="请输入标题编号" class="layui-input" id="addaid">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标题名称</label>
				<div class="layui-input-block">
					<input type="text" name="aname" lay-verify="title"
						autocomplete="off" placeholder="请输入标题名称" class="layui-input" id="addaname">
				</div>	
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标题内容</label>
				<div class="layui-input-block">
					<input type="text" name="acontent" lay-verify="title" autocomplete="off"
						placeholder="请输入标题内容" class="layui-input" id="addacontent">
				</div>
			</div>
			
		</form>
	</div>
<body>

	<div class="demoTable">
	
		搜索ID：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn " id="addgs" lay-filter="addgs">新增标题</button>
		
	</div>

	<table class="layui-hide layui-card-body" lay-filter="test" id="test"></table>


	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


	
	
	



	<script src="../assets/layui.js" charset="utf-8"></script>
	<script>
	
	
		layui.use([ 'form', 'table', 'layer' ], function() {

			var table = layui.table;
			const
			form = layui.form;
			var ktab = table.render({
				elem : '#test',
				url : '/about/showabout',
				cellMinWidth : 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				,
				cols : [ [ {
					field : 'aid',
					width : 100,
					title : '标题编号',
					sort : true
				},
				 {
					field : 'aname',
					width : 100,
					title : '标题名称'
				}, {
					field : 'acontent',
					width : 100,
					title : '标题内容',
					sort : true
				},
				{
					title : '操作',
					toolbar : "#barDemo"
				} ] ],
				page : true,
				id : 'testReload'
			});

			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							id : demoReload.val()
						}
					}, 'data');
				}
			};
			
			
	
			
			
			
			$("#addgs").click(function () {
				var ulayer = layer.open({
				        type: 1
				        ,offset: 'auto'
				        ,id: 'layerDemo'//防止重复弹出
				        ,content: $("#addForm")
				        ,btn: ['添加', '取消']
				        ,btnAlign: 'c' //按钮居中
				        ,shade: 0 //不显示遮罩
				        ,btn1: function(){
				        	$.ajax({
				  			  type:'post'
				  			  ,url:'/about/save'
				  			  ,data:{"aid":""+$('#addaid').val()+"","aname":""+$('#addaname').val()+"","acontent":""+$('#addacontent').val()+""}
				  			  ,success:function (d){
				  				  layer.close(ulayer);
				  				  if(d == 1){
				  				  layer.msg('您的添加操作已成功！！！',{icon: 1,time:500}, function(){
				  					  //do something
				  						  ktab.reload();
				  						  //关闭layer.open
				  					}); 
				  				  }
				  			  }
				  		  });
				        } 
				 		,btn2: function(index, layero){
				 			layer.closeAll();
				          }
				      });
			});
			
			
			
			

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				console.log(data);
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					layer.msg('ID：' + data.aid + ' 的查看操作');
				} else if ("del" === layEvent) {

					 layer.confirm('真的删除行么', function (index) {
		            	 $.ajax({
		   				  type:'delete'
                             ,url:"/about/delete/"+ data.aid+""
		   				  ,success:function (d){
		   					  if(d == 1){
		   					  layer.msg('您的删除已成功！！！',{icon: 1,time:500}, function(){
		   						  //do something
		   						  ktab.reload();
		   						  layer.close(index);
		   							  //关闭layer.open
		   						}); 
		   						  //table刷新
		   					  }
		   				  }
		   			  });
		            });

					
					
				} else if ("edit" === layEvent) {
						
					
				

					
					
					
					var ulayer = layer.open({
						type : 1,
						title : true //不显示标题栏
						,
						area : [ '350px', '300px' ],
						shade : [ 0.8, '#393D49' ],
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						btnAlign : 'c',
						moveType : 1 //拖拽模式，0或者1
						,
						content : $("#updateForm"),
						success : function(layero) {
							var btn = layero.find('.layui-layer-btn');
							btn.find('.layui-layer-btn0').attr({
								href : 'http://www.layui.com/',
								target : '_blank'
							});
						}
					});
					/* form.val("test1", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
					 "sno": data.sno // "name": "value"
					  ,"sname": data.sname
					 ,"age": data.age
					 ,"sex": data.sex
					});*/
					$("form input[name='aid']").val(data.aid);
					$("form input[name='aname']").val(data.aname);
					$("form input[name='acontent']").val(data.acontent);
					


					form.on('submit(*)', function(data) {
						console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
						console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
						console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
						$.ajax({
							type : 'post',
							url : '/about/update',
							data:
							data.field
		                       /*   "cno":$("form input[name='cno']").val()
		                        , "cmodel":$("form input[name='cmodel']").val()
		                        , "ccolour":$("form input[name='ccolour']").val()*/
		                    ,

							success : function(d) {
								layer.close(ulayer);

								if (d == 1) {
									layer.msg('您的修改已成功！！！', {
										icon : 1,
										time : 500
									}, function() {
										//do something
										ktab.reload();
										//关闭layer.open
									});
									//table刷新
								}
							}
						});
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});

				}


			});

		});

		
	</script>

</body>
</html>


